<template>
  <div @click="cancelDialog" v-if="isDialog" class="container">
    <div  @click.stop class="item">
      <header>
          <h4  contenteditable>这是遮罩层的标题</h4>
          <div @click="cancelDialog" class="closeBtn">X</div>
      </header>
      <section>
          <slot>这是内容</slot>
      </section>
      <footer>
        <button>确定</button>
        <button @click="cancelDialog">取消</button>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isDialog"],
  methods:{
      cancelDialog(){
          this.$emit('update:isDialog',false)
      }
  }
};
</script>

<style scoped>
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0,0.5);
}
.item{
    width: 300px;
    height:200px;
    padding: 0 0 0 20px;
    background-color:white;
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
}
.closeBtn{
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 20px;
}
footer{
    position: absolute;
    bottom: 30px;
    left: 40px;
}
footer button { 
    margin: 0 20px 0  0;
}
</style>